<template>
  <div class="courses">
    <div class="headBox">
      <div class="course-header">
        <div class="header-content">
          <div class="courseDesc">
            <breadcrumb class="hidden-xs-only" />
          </div>
          <div class="courseName">学习广场</div>
        <!-- <div class="courseShare-box hidden-xs-only">
          <share />
        </div> -->
      </div>
    </div>
      <div class="courseTypeBox">
        <div class="courseTypeList">
          <template v-for="(item, index) in courseTypes">
              <div class="courseType" :class="{isActive: courseType == item.type}" @click="handleChangePage(item)" :key="index" >
                {{item.name}} <span class="count">({{computedCount(item.type)}})</span>
              </div>
          </template>
        </div>
      </div>
      <div class="searchInputBox">
        <div class="searchInput">
          <el-input
            placeholder="输入课程名称 / 讲师"
            v-model="search"
            class="input-with-select"
          >
            <el-button slot="append" icon="iconfont iconsearch"></el-button>
          </el-input>
        </div>
      </div>
      <!-- <div class="countBox">
        <div class="count">
          <div class="label">总学分</div>
          <div class="content"></div>
        </div>
        <div class="count">
          <div class="label">总学时</div>
          <div class="content"></div>
        </div>
        <div class="count">
          <div class="label">已选修</div>
          <div class="content"></div>
        </div>
        <div class="count">
          <div class="label">完成</div>
        </div>
      </div> -->
    </div>
    <div class="coursesList">
      <div v-if="!filterCourse.length">暂无课程</div>
      <div
        class="courseBox hover_boxShadow_defaut_shadow"
        v-for="(item, index) in filterCourse"
        :key="index"
        @click="handelJumpRoute(item)"
        :title="item.name | filterName"
      >
        <div class="imgBox">
          <img v-lazy="item.iconPath" />
          <!-- : src[Math.floor(Math.random() * (11 - 1)) + 1] -->
        </div>
        <div class="courseInfoBox">
          <div class="name" :title="item.name" :class="{isConventionalTitle: isConventional}">
            {{ item.name | filterName }}
          </div>
          <!-- 学时：120小时 | 学分：4个学分 |  -->
          <div class="teacher">
            <div class="label">教师</div>
            <span v-if="isConventional">{{ item.tutorNameList || item.tutorStaffUserName }}</span>
            <span v-else>无</span>
          </div>
          <div class="desc" :title="item.currDesc">
            简介：{{ item.currDesc || "无" }}
          </div>
          <div class="design">
            设计：{{ item.designerNameList || item.mainDesignerUserName || "【设计师】" }}
          </div>
          <div class="time">
            <span class="detail">选修时间 ：</span>
            <span v-if="isConventional">
              {{ item.openChooseTime || "无" | filterTime }} ~
              {{ item.closeChooseTime || "无" | filterTime }}
            </span>
            <span v-else>无</span>
            <span class="linear" />
            <span class="detail">已选人数 ：</span>
            <span>{{ item.choosedNum || 0 }}</span>
            <span class="linear" />
            <span class="detail">上课时间 ：</span>
            <span v-if="isConventional">
              {{ item.startTeachingTime || "无" | filterTime }} ~
              {{ item.finishTeachingTime || "无" | filterTime }}
            </span>
            <span v-else>无</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getCourselist, getCurriculumlist } from "@/request/courses";
import { location } from "@/util/tool";
import { mapState } from "vuex";
import remarksVue from '../../creativeCourses/creative/remarks.vue';
const breadcrumb = () => import("@/components/Breadcrumb/index");
export default {
  components: {
    breadcrumb
  },
  data() {
    return {
      coursesData: [],
      search: "",
      location: location(window),
      isConventional: true,
      courseType: "常规",
      courseTypes: [
        {
          name: "常规课程",
          type: "常规",
        },
        {
          name: "SRP",
          type: "SRP",
        },
        {
          name: "比赛",
          type: "比赛",
        },
        {
          name: "实训",
          type: "实训",
        },
        {
          name: "自主学习",
          type: "自主学习",
        }
      ],
    };
  },
  async created() {
    await this.$store.dispatch("courses/fetchCoursesList")
    this.coursesData = this.currCourses
    // this.fetchCurriculumlist();
  },
  filters: {
    filterName(value) {
      return value.substring(
        0,
        value.lastIndexOf("_") == -1 ? value.length : value.lastIndexOf("_")
      );
    },
    filterTime(val) {
      const time = new Date(val);
      if (time == "Invalid Date") return val;
      return `${time.getFullYear()}-${
        time.getMonth() + 1
      }-${time.getDate()} ${time.getHours()}:${time.getMinutes() == 0 ? "00": time.getMinutes()}:${time.getSeconds() == 0 ? "00" : time.getSeconds()}`;
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      currCourses: (state) => state.courses.currCourses
    }),
    filterCourse() {
      let courses = this.coursesData
      if (this.courseType != "自主学习") {
        courses = courses.filter(item => !item.allowGenCurr).filter(item => item.courseType == this.courseType || (this.courseType == "常规" && !item.courseType && !item.allowGenCurr))
      } else {
        courses = courses.filter(item => item.allowGenCurr)
      }
      if (this.search) {
        let newCourse = [];
        courses.forEach((item) => {
          if (item.name.split("_")[0].indexOf(this.search) !== -1) {
            newCourse.push(item);
          }
          if (item.tutorNameList.indexOf(this.search) !== -1) {
            newCourse.push(item);
          }
        });
        return newCourse;
      } else {
        return courses;
      }
    },
    computedCount() {
      return function(type) {
        return this.coursesData.filter(item => {
          if (item.courseType === undefined && type == '常规') return true
          return item.courseType == type
        })?.length || 0
      }
    }
  },
  methods: {
    // 获取可选修课程
    // fetchCurriculumlist() {
    //   getCurriculumlist().then((res) => {
    //     if (res.errno === 0) {
    //       res.data = res.data.filter((item) => {
    //         if (item.currNo == 6 && item.courseID === 8) {
    //           if ([225].indexOf(this.userInfo.userID) !== -1) {
    //             return item;
    //           }
    //         } else {
    //           return item;
    //         }
    //       });
    //       this.coursesData = res.data?.reverse() || [];
    //     }
    //   });
    // },
    // 跳转路由
    handelJumpRoute(item) {
      this.$router.push({
        name: "Curr",
        // query: {
        //   courseId: item.courseID,
        //   currNo: item.currNo,
        // },
        params: {
          id: item.currNo,
        },
      });
    },
    handleChangePage(item) {
      this.courseType = item.type
    }
  },
};
</script>

<style lang="stylus">
.courses {
  .headBox {
    // margin: 35px 0 30px;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    // width: 100%;

    .course-header {
    height: 148px;
    background: url('~@/assets/images/courseBg.png') no-repeat;
    background-repeat: no-repeat;
    background-size: 100% 100%;

      .header-content {
        position: relative;
        padding-top: 34px;
        margin: 0 auto;
        max-width: 1200px;
      }

      .courseName {
        margin-top: 12px;
        width: 100%;
        font-family: PMingLiU-ExtB;
        font-size: 32px;
        color: #ffffff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .courseTypeBox {
      width 100%;
      height: 80px;
      background-color: #fff;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.16);
      margin-bottom: 30px;

      .courseTypeList {
        max-width: 1200px;
        margin: 0 auto;
        height 80px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .courseType {
          margin-right: 80px;
          position relative
          cursor: pointer;
          margin-left: 5px;
          font-family: Microsoft YaHei;
          font-size: 16px;
          color: #003262;
          
          span {
            position: absolute;
            top: 0;
          }
        }

        .isActive {
          font-weight: bold;
          font-size: 16px;
          color: #003262;
        }

        .isActive::after {
          position: absolute;
          content: '';
          left: 50%;
          right: 50%;
          bottom: -5px;
          width: 52px;
          height: 2px;
          background: #003262;
          transform: translate(-50%, 0);
        }
      }
    }

    // flex: 1;
    .searchInputBox {
      max-width: 1200px;
      margin: 0 auto;
      margin-bottom: 30px;
      .searchInput {
        width: 309px;
        height: 36px;

        .input-with-select {
          .el-input__inner {
            height: 36px;
            line-height: 36px;
            border-color: #d9dde1;
            border-right: none;
            color: #333333;
          }

          .el-input-group__append {
            // line-height: 35px;
            background: #f1ae3d;
            border-color: #f1ae3d;

            .iconsearch {
              color: #fff;
            }
          }
        }
      }
    }

    .countBox {
      display: flex;
      align-items: center;

      .count {
        margin-left: 50px;
        display: flex;
        align-items: center;

        .label {
          padding: 0 16px;
          min-width: 48px;
          height: 32px;
          line-height: 32px;
          background-color: #f1ae3d;
          border-radius: 5px;
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #ffffff;
        }

        .content {
          margin-left: 12px;
          width: 49px;
          height: 32px;
          border-bottom: 3px solid #999999;
          text-align: center;
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #333333;
        }
      }
    }
  }

  .coursesList {
    margin: 0 auto;
    max-width: 1200px;
    .courseBox {
      cursor: pointer;
      padding: 34px 31px 35px 21px;
      margin-bottom: 25px;
      display: flex;
      width: 1200px;
      height: 262px;
      background-color: #ffffff;
      // box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.16);
      border-radius: 10px;

      .imgBox {
        width: 288px;
        height: 193px;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }

      .courseInfoBox {
        margin-left: 28px;
        display: flex;
        flex-flow: column;

        .name {
          font-family: PMingLiU-ExtB;
          font-weight: bold;
          font-size: 20px;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        

        .design, .time {
          margin-top: 6px;
          font-family: PMingLiU-ExtB;
          font-size: 12px;
          color: #999999;
        }

        .desc {
          margin-top: 15px;
          max-width: 760px;
          height: 43px;
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #666666;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .teacher {
          margin-top: 15px;
          font-family: PMingLiU-ExtB;
          font-size: 14px;
          color: #333333;

          .label {
            margin-right: 5px;
            display: inline-block;
            width: 32px;
            height: 21px;
            line-height: 22px;
            background-color: #f1ae3d;
            border-radius: 5px;
            text-align: center;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #ffffff;
          }
        }

        .design, .time {
          margin-top: 13px;
          display: flex;
          align-items: center;
          font-family: PMingLiU-ExtB;
          font-size: 14px;
          color: #333333;

          .detail {
            margin: 0;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #f1ae3d;
          }

          .linear {
            margin: 0 15px;
            width: 1px;
            height: 14px;
            background: #666666;
          }
        }
      }
    }

    .courseBox:hover {
      // box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.16);
    }
  }
}
@media only screen and (max-width: 767px) {
  .courseTypeList {
    justify-content: space-around !important;

    .courseType {
      margin: 0 !important;
    }
  }
  .coursesList {
    .courseBox {
      margin: auto;
      padding: 0;
      width: 95% !important;

      div {
        margin-top: 0 !important;
      }

      .imgBox {
        display: none;
      }
  
      .courseInfoBox {
        margin-left: 0 !important;

        .name {
          overflow: unset !important;
          -webkit-line-clamp: unset !important;
        }
      }

      .time {
        span {
          display: block;
        }
      }
    }
  }
}
</style>